import React, { Component } from 'react';
import Drawer from 'react-native-drawer';
import { DefaultRenderer, Actions } from 'react-native-router-flux';

import TabView from './TabView';

export default class NavigationDrawer extends Component {
  render() {
    const state = this.props.navigationState
    const children = state.children
    return (
      // {/* open对应Drawer的state.open状态 */}
      // <Scene key="drawer" component={NavigationDrawer} open={true}>
      <Drawer
        ref='navigation'
        // Actions.refresh({key:..,open:true})更改的是state上open的值
        open={state.open}
        // displace 不会对原组件进行覆盖，只是将原组件平移
        // overlay在菜单滑出来后会对原组件进行覆盖，原组件不动
        type="overlay"
        // 菜单组件
        content={<TabView />}
        // 在panCloseMask设置的区域内触摸触发关闭
        tapToClose
        // 在panOpenMask设置的区域内触摸触发菜单
        acceptTap
        // 弹出菜单右侧距离屏幕右侧的距离
        openDrawerOffset={0.6}
        // 左侧数，10%的屏幕区域，在这段区域内触摸，弹出菜单
        panOpenMask={0.1}
        // 从屏幕右侧数，60%区域内触摸，关闭菜单
        panCloseMask={0.6}
        // 只处理横向操作
        negotiatePan
        // state.key 的值是0_drawer，key指定为drawer效果相同
        // 这里是在滑动时对state.open状态进行更新，方便程序其他地方获取当前的状态
        // 如果程序其他地方不使用则可以省略，不影响菜单滑动
        onOpen={()=>Actions.refresh({key:state.key, open: true})}
        onClose={()=>Actions.refresh({key:state.key, open: false})}
        tweenHandler={Drawer.tweenPresets.parallax}
      >
        <DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} />
      </Drawer>
    );
  }
}
